<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>门店收入详情</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="../../css/timecheck.css" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <style>
    html,
    body,
    #app {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      margin-bottom: 0.3rem;
    }

    .store-name {
      margin-top: 1px;
      background-color: #fff;
      color: #000000;
      margin-bottom: 0.05rem;
      padding-left: 0.1rem;
      font-size: 0.22rem;
    }

    .store-name>img {
      width: 0.22rem;
      margin-right: 0.1rem;
    }
    /*.store-name span {*/
    /*margin-left: 0.2rem;*/
    /*margin-right: 0.1rem;*/
    /*color: #353535;*/
    /*}*/
    /**/

    .income-classification-box {
      background-color: #FFFFFF;
      padding-bottom: 0.2rem;
    }

    .income-classification>div {
      background-color: #F9F9F9;
      border-radius: 0.2rem;
      text-align: center;
      width: 97%;
      margin: 0 auto;
      border: 1px transparent solid;
    }

    .income-classification:nth-of-type(4),
    .income-classification:nth-of-type(5) {
      margin-top: 0.08rem;
    }

    .flex {
      display: flex;
    }

    .itme-box {
      padding: 0rem 0 0.2rem;
    }

    .spot {
      position: absolute;
      width: 0.18rem;
      height: 0.18rem;
      border-radius: 50%;
      background-color: #C9C9C9;
      right: -0.16rem;
    }

    .flex-item {
      flex: 1;
    }

    .left-item {
      border-right: 1px solid #CCCCCC;
    }

    .flex-item p {
      margin: 0.05rem;
      color: #555555;
    }

    .class-each {
      font-size: 0.26rem;
      font-weight: bold;
      color: #000000;
      margin: 0.1rem 0 0.06rem;
    }

    .total-income {
      font-size: 0.26rem;
      font-weight: bold;
      color: #000000;
      margin: 0 0 0.1rem;
    }
    /**/

    .pie-block {
      background-color: #FFFFFF;
      margin-top: 0.1rem;
    }

    .line-block {
      background-color: #FFFFFF;
      margin-bottom: 0.7rem;
      /*margin-top: 0.1rem;*/
    }

    .light {
      color: #8e8a8a;
      font-size: 0.22rem;
    }

    .storeChoose {
      width: 100%;
      /*border: 1px solid #ccc;*/
      font-size: 0.22rem;
      text-align: center;
      overflow: hidden;
      padding: 0.2rem 3%;
      background-color: white;
      margin-top: 0.1rem;
    }

    .storeChoose span {
      display: inline-block;
      width: 33%;
      padding: 0.06rem 0;
      float: left;
      border: 1px solid #ccc;
      font-size: 0.2rem;
      background-color: white;
    }

    .storeChoose span:nth-child(2) {
      border-right: none;
      border-left: none;
    }

    .storeChoose .default {
      background-color: #ccc;
    }

    .dotDiv {
      width: 0.4rem;
      position: absolute;
      top: 0.1rem;
      right: 0.15rem;
    }

    .dot {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background-color: #ccc;
      margin: 0.05rem auto 0;
    }
    .tips{
      font-size:12px;
      margin-left:10px;
      color:#BBBBBB;
      padding: 0.1rem 0;

    }



  </style>
</head>

<body>
<div id="app" class="mui-content">
  <time-check :type='1' :dateType="dateType" :totalNum='(totalData.totalIncome/100+totalData.appMoney/100).toFixed(2)' :realnum='(totalData.totalIncome/100-totalData.recharge/10-totalData.atmDiamond/10+totalData.appMoney/100).toFixed(2)' :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
  <p class="store-name"><span class="iconfont icon-iconstoreddetailcompass"></span>{{storeName}}</p>
  <!--<p class="store-name"><img src="../../images/WIFI.png" alt="" >本店已开启自动抄表</p>-->
  <div class="income-classification-box mui-row">
    <div class="tips">以下为统计数据(间隔30分钟)：</div>
    <div class="income-classification mui-col-sm-8 mui-col-xs-8">
      <div style="position: relative;">
        <p class="class-each">ATM销售</p>
        <p class="total-income">{{((totalData.atmCash+totalData.atmWeixin)/100+(totalData.atmDiamond/10)).toFixed(2)}}</p>
        <div class="flex itme-box">
          <div class="flex-item left-item">
            <p class="class-each-item-name light">现金购币</p>
            <p class="class-each-item-num">{{(totalData.atmCash/100).toFixed(2)}}</p>
          </div>
          <div class="flex-item left-item">
            <p class="class-each-item-name light">微信购币</p>
            <p class="class-each-item-num">{{(totalData.atmWeixin/100).toFixed(2)}}</p>
          </div>
          <div class="flex-item">
            <p class="class-each-item-name light">钻石提币</p>
            <p class="class-each-item-num">{{(totalData.atmDiamond/10).toFixed(2)}}</p>
          </div>
        </div>
        <div class="dotDiv" @click="toPage('ATMList','')">
          <p class="dot"></p>
          <p class="dot"></p>
          <p class="dot"></p>
        </div>
        <!--<div class="spot"></div>-->
      </div>
    </div>
    <div class="income-classification mui-col-sm-4 mui-col-xs-4">
      <div>
        <p class="class-each">APP充值</p>
        <p class="total-income">{{totalData.appMoney !=='--' ? (totalData.appMoney/100).toFixed(2) :'--'}}</p>
        <div class="flex itme-box">
          <!--<div class="flex-item left-item">
            <p class="class-each-item-name">微信投币</p>
            <p class="class-each-item-num">---</p>
          </div>-->
          <div class="flex-item">
            <p class="class-each-item-name light">销售G币</p>
            <p class="class-each-item-num">{{totalData.appGcoins}}枚</p>
          </div>
        </div>
        <div class="dotDiv" @click="toPage('AppRechargeDetail','')" >
          <p class="dot"></p>
          <p class="dot"></p>
          <p class="dot"></p>
        </div>
      </div>
    </div>
    <div class="income-classification mui-col-sm-12 mui-col-xs-12">
      <div>
        <p class="class-each">吧台销售</p>
        <p class="total-income">{{((totalData.cardCash+totalData.cardWeixin+totalData.cardBank+totalData.cardAlipay+totalData.cardMeituanAmount)/100).toFixed(2)}}</p>
        <div class="flex itme-box">
          <div class="flex-item left-item">
            <p class="class-each-item-name light">现金</p>
            <p class="class-each-item-num">{{(totalData.cardCash/100).toFixed(2)}}</p>
          </div>
          <div class="flex-item left-item">
            <p class="class-each-item-name light">微信</p>
            <p class="class-each-item-num">{{(totalData.cardWeixin/100).toFixed(2)}}</p>
          </div>
          <div class="flex-item left-item">
            <p class="class-each-item-name light">POS机</p>
            <p class="class-each-item-num">{{(totalData.cardBank/100).toFixed(2)}}</p>
          </div>
          <div class="flex-item left-item">
            <p class="class-each-item-name light">支付宝</p>
            <p class="class-each-item-num">{{(totalData.cardAlipay/100).toFixed(2)}}</p>
          </div>
          <div class="flex-item ">
            <p class="class-each-item-name light">美团</p>
            <p class="class-each-item-num">{{(totalData.cardMeituanAmount/100).toFixed(2)}}</p>
          </div>
        </div>
        <div class="dotDiv" @click="toPage('barIncomeDetail','吧台销售报告')">
          <p class="dot"></p>
          <p class="dot"></p>
          <p class="dot"></p>
        </div>
      </div>
    </div>
  </div>
  <!--饼图-->
  <div class="mui-row pie-block">
    <div class="mui-col-xs-6 mui-col-sm-6">
      <div id="left-pie" style="width: 100%;height:3.5rem;padding-top: 0.2rem"></div>
    </div>
    <div class="mui-col-xs-6 mui-col-sm-6">
      <div id="right-pie" style="width: 100%;height:3.5rem;padding-top: 0.2rem"></div>
    </div>
  </div>
  <!--选择框-->
  <div class="storeChoose">
    <span @click="choose(1)" :class="{default:chooseType ===1}">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}销售额</span>
    <span @click="choose(2)" :class="{default:chooseType ===2}">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}人均消费</span>
    <span @click="choose(3)" :class="{default:chooseType ===3}">{{(dateType ===0 ? '当天' : dateType ===1 ? '当周' : '当月')}}消费时段分析</span>
  </div>
  <!--line图-->
  <div class="line-block">
    <div id="line-chart" style="width: 100%;height:5rem;"></div>
  </div>
  <two-nav currenturl="incomeDetail" :storename="storeName"  ></two-nav>
</div>
<script src="../../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../common/timeCheck.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../config.js"></script>
<script src="../../common/nav.js"></script>
<script type="text/javascript">
  mui.init()
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        currentShopObj: {},
        actnum: 0,
        fromDate: '',
        toDate: '',
        storeName: '',
        storeId: '',
        dateType: '1',
        totalData: {
          totalIncome: 0,
          atmCash: 0,
          atmWeixin: 0,
          cardCash: 0,
          cardWeixin: 0,
          cardBank: 0,
          cardAlipay: 0,
          recharge: 0,
          dailyIncome: []
        },
        pieOptions1: {
          title: {
            subtext: '销售额构成',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            triggeron: 'click',
            position: [10, 10],
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 0,
            left: 'center',
            data: ['APP充值', '吧台销售'],
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 10
            }
          },
          color: ['#4472C4', '#ED7D31', '#a3d609'],
          series: [{
            type: 'pie',
            selectedOffset: 5,
            radius: '60%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 0,
                name: 'APP充值',
              },
              {
                value: 0,
                name: '吧台销售'
              },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        pieOptions2: {
          title: {
            subtext: '支付渠道分布',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            triggeron: 'click',
            position: [10, 10],
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            bottom: 0,
            left: 'center',
            data: ['微信', '现金', '支付宝', 'POS机', '美团'],
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 10
            }
          },
          color: ['#ED7D31', '#FFC000', '#a3d609', '#868686', '#4472C4'],
          series: [{
            type: 'pie',
            selectedOffset: 5,
            radius: '60%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [{
              value: 0,
              name: '微信',
            },
              {
                value: 0,
                name: '现金'
              },
              {
                value: 0,
                name: '支付宝',
              },
              {
                value: 0,
                name: '银行卡'
              },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        lineOPtions: {
          title: {
            subtext: '近30日销售额',
            left: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 500
            }
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            data: ['收入'],
            bottom: 0,
            itemGap: 5,
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
              fontSize: 12
            }
          },
          feature: {
            dataView: {
              show: true,
              readOnly: false
            }
          },
          calculable: true,
          grid: {
            //          改变边距
            left: '0',
            right: '5%',
            bottom: '10%',
            top: '20%',
            containLabel: true,
            borderColor: '#e2e2e2'
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            splitLine: {
              show: false
            },
            data: [],
            axisLabel: {
              textStyle: {
                color: '#868686',
                fontSize: '8px'
              }
            }
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色  
                color: ['#b1b1b1'],
                type: 'dotted'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#868686',
                fontSize: '8px'
              }
            }
          }],
          series: [{
            name: '收入',
            type: 'line',
            stack: '收入',
            //								areaStyle:{},
            itemStyle: {
              normal: {
                color: '#ED7D31',
                lineStyle: {
                  color: '#ED7D31'
                }
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [],
                globalCoord: false // 缺省为 false
              }
            },
            data: []
          }]
        },
        lastPage: '',
        top: '1rem',
        chooseType: 1, //30天销售额  2 人均消费  3 消费时段分析
        mapData: [],
      }
    },
    mounted: function() {
      var vm = this
      mui.plusReady(function() {
        vm.receiveParams()
      });
      this.initCharts()

    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId
        this.storeName = sf.storeName
        this.fromDate = sf.fromDate
        this.toDate = sf.toDate
        this.actnum = sf.actnum
        this.dateType = sf.dateType
        this.lastPage = sf.lastPage ? sf.lastPage : false
//        if(this.lastPage) {
//          this.closePage()
//        }
      },
      loadData: function() {
        var vm = this;
        config.ajax({
          url: '/Whphone/storeIncome',
          data: {
            fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
            toDate: new Date(vm.toDate).format('yyyyMMdd'),
            storeId: vm.storeId,
            storeName: vm.storeName,
            type: vm.dateType
          },
          success: function(res) {
            console.log(JSON.stringify(res))
            if(res.result === 1) {
              vm.totalData = res.storeIncome;
              var atmTotal = ((vm.totalData.atmCash + vm.totalData.atmWeixin) / 100 + vm.totalData.atmDiamond / 10)
              var appTotal=    vm.totalData.appMoney !=='--' ? vm.totalData.appMoney/100 : 0


              var cardTotal = (vm.totalData.cardCash + vm.totalData.cardWeixin + vm.totalData.cardBank + vm.totalData.cardAlipay + vm.totalData.cardMeituanAmount) / 100
              var rechargeTotal = vm.totalData.recharge / 10;
              vm.pieOptions1.series[0].data = [
                  {
                    name: 'APP充值',
                    value: appTotal
                  },
                {
                  name: '吧台销售',
                  value: cardTotal
                },
                //                {
//                  name: 'ATM销售',
//                  value: atmTotal
//                },
//                {
//                  name: '扫码直玩',
//                  value: rechargeTotal
//                }
              ]
              var weixinTotal = (vm.totalData.atmWeixin + vm.totalData.cardWeixin+vm.totalData.appMoney) / 100
              var cashTotal = (vm.totalData.atmCash + vm.totalData.cardCash) / 100
              vm.pieOptions2.series[0].data = [{
                name: '微信',
                value: weixinTotal
              },
                {
                  name: '现金',
                  value: cashTotal
                },
                {
                  name: '支付宝',
                  value: vm.totalData.cardAlipay / 100
                },
                {
                  name: 'POS机',
                  value: vm.totalData.cardBank / 100
                },
                {
                  name: '美团',
                  value: vm.totalData.cardMeituanAmount / 100
                }
              ];
              vm.changeMap()
            } else {
              mui.toast(res.errormsg)
            }
          }
        })
      },
//选择Fun   params  =chooseType
      choose: function(params) {
        var vm = this;
        if(params !== vm.chooseType) {
          vm.chooseType = params;
          vm.changeMap()
        }
      },
//初始化 charts
      initCharts: function() {
        var vm = this
        var leftPie = echarts.init(document.getElementById('left-pie'));
        leftPie.setOption(vm.pieOptions1);
        var rightPie = echarts.init(document.getElementById('right-pie'));
        rightPie.setOption(vm.pieOptions2)
        var lineChart = echarts.init(document.getElementById('line-chart'))
        lineChart.setOption(vm.lineOPtions)
      },
//根据选择 重新绘制map
      changeMap: function() {
        var vm = this
        //选择不同 赋值不同的数组   //30天销售额  2 人均消费  3 消费时段分析
        if(vm.chooseType === 1) {
          vm.mapData = vm.totalData.incomeCurve;
          vm.lineOPtions.series[0].type = 'bar';
        } else if(vm.chooseType === 2) {
          vm.mapData = vm.totalData.perCapitaCsp;
          vm.lineOPtions.series[0].type = 'line';
        } else {
          vm.mapData = vm.totalData.cspPeriod;
          vm.lineOPtions.series[0].type = 'line';
        }
        var data = '',
          time = '',
          max = '';
        vm.lineOPtions.series[0].data = [], vm.lineOPtions.xAxis[0].data = [];
        vm.mapData.forEach(function(item, index) {
          if(vm.chooseType === 1) {
            data = item.income
            vm.lineOPtions.series[0].areaStyle.color.colorStops = []
          } else if(vm.chooseType === 2) {
            data = item.consumption
            vm.lineOPtions.series[0].areaStyle.color.colorStops = []
          } else {
            data = item.consumption
            vm.lineOPtions.series[0].areaStyle.color.colorStops = [{
              offset: 0,
              color: 'pink'
            }, // 0% 处的颜色
              {
                offset: 1,
                color: '#ED7D31'
              } // 100% 处的颜色
            ]
          };
          data = (data * 1 / 100).toFixed(2)
          //时间处理
          time = JSON.parse(JSON.stringify(item.dateNo));
          if(vm.chooseType !== 3) {

            if(vm.dateType === 0) {
              time = (time + '').replace(/^(\d{4})(\d{2})(\d{2})$/, "$3");
            } else if(vm.dateType === 1) {
              time = time + '周'
            } else {
              time = (time + '').replace(/^(\d{4})(\d{2})$/, "$2") + '月'
            }
          }
          //y轴最大值判断
          if(Number(data) > max) {
            max = Number(data)
          }
          vm.lineOPtions.series[0].data.push(data)
          vm.lineOPtions.xAxis[0].data.push(time)
        });
        vm.lineOPtions.yAxis[0].max = Math.ceil(max > 5 ? max : 5);
        if(vm.chooseType !== 3) {
          var name = '近' + (vm.dateType === 0 ? '30天' : vm.dateType === 1 ? '12周' : '12个月') + (vm.chooseType === 1 ? '销售额' : vm.chooseType === 2 ? '人均消费' : '')
        } else {
          var name = (vm.dateType === 0 ? '当天' : vm.dateType === 1 ? '当周' : '当月') + '消费时段分析'
        }

        vm.lineOPtions.title.subtext = name;
        vm.lineOPtions.series[0].name = vm.chooseType === 1 ? '销售额' : vm.chooseType === 2 ? '人均消费' : '消费时段分析';
        vm.lineOPtions.legend.data[0] = vm.chooseType === 1 ? '销售额' : vm.chooseType === 2 ? '人均消费' : '消费时段分析';
        vm.initCharts()
      },
//去 ATM销售 / 吧台 / app充值详情页面
      toPage:function(url,titleText){
        console.log(14)
        var vm = this;
        var storeName=vm.storeName;
        mui.openWindow({
          url: './'+url+'.html',
          id: url,
          styles: {
            titleNView: {
              titleText:  storeName+titleText,
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            currentShopObj: vm.currentShopObj,
            storeId: vm.storeId,
            storeName: vm.storeName,
            fromDate: vm.fromDate,
            toDate:vm.toDate,
            dateType:vm.dateType,
            actnum: vm.actnum,
          },
          createNew:true,
        });
      },
//去同级的其他页面（收入，收币，返奖，出票，榜单，活动）
      toOtherPage: function(url) {
        var vm = this;
        var storeName = vm.storeName;
        mui.openWindow({
          url: './' + url + '.html',
          id: url,
          styles: {
            titleNView: {
              titleText: storeName,
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              buttons: [{
                fontWeight: 'normal',
                fontSize: '18px',
                float: 'right',
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            storeId: vm.storeId,
            storeName: vm.storeName,
            fromDate: vm.fromDate,
            toDate: vm.toDate,
            dateType: vm.dateType,
            actnum: vm.actnum,
            lastPage: 'incomeItem',
          },
          createNew: true,
        });
        var self=plus.webview.currentWebview();
        setTimeout(function(){
          self.close('none');
        },1000)
      },

    },
    watch: {
      fromDate: function() {
        this.loadData()
      }
    }
  })
</script>
</body>

</html>